<html>
<head>
<title>O_o</title>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery/jquery.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<center>
<br>	
	<form>
		<input id="btn1" type="button" value="1" class="button"> 
    <input id="btn2" type="button" value="2" class="button"> 
    <input id="btn3" type="button" value="3" class="button"> 
    <input id="btn4" type="button" value="4" class="button"> 
    <input id="btn5" type="button" value="Всё" class="button">
	</form>		
	<div id="wrapper">
	<div id="content">
	
	<script>
		$(document).ready(function(){
		
			$('#btn1').click(function(){
				$.ajax({
					url: "1.html",
					cache: false,
					success: function(html){
						$("#content").html(html);
					}
				});
			});
			
			$('#btn2').click(function(){
				$.ajax({
					url: "2.html",
					cache: false,
					success: function(html){
						$("#content").html(html);
					}
				});
			});
			
			$('#btn3').click(function(){
				$.ajax({
					url: "3.html",
					cache: false,
					success: function(html){
						$("#content").html(html);
					}
				});
			});
			
			$('#btn4').click(function(){
				$.ajax({
					url: "4.html",
					cache: false,
					success: function(html){
						$("#content").html(html);
					}
				});
			});
			
			$('#btn5').click(function(){
				$.ajax({
					url: "all.html",
					cache: false,
					success: function(html){
						$("#content").html(html);
					}
				});
			});
			
			
		});
	</script>
</div>
</div>
</center>	
</body>
</html>